<template>
  <a-row id="mr-system-header">
    <a-layout-header :style="{backgroundColor: $store.state.theme.color}">
      <a-icon class="trigger" :type="value ? 'menu-unfold' : 'menu-fold'" @click="$emit('input', !value)" />
      <span class="title">{{ title }}</span>
      <mr-title-menu />
    </a-layout-header>
  </a-row>
</template>

<script>
export default {
  name: 'MrSystemHeader',
  props: {
    value: Boolean,
    title: String
  }
}
</script>

<style scoped lang="less">
  #mr-system-header .ant-layout-header {
    height: 60px;
    line-height: 60px;
    padding: 0px;
    .trigger {
      font-size: 24px;
      //line-height: 60px;
      padding: 0px 16px;
      cursor: pointer;
      transition: color 0.3s;
      color: white;
    }
    .trigger:hover {
      color: #fcb106;
    }
    .title {
      font-size: 20px;
      font-weight: bold;
      color: white;
    }
  }
</style>
